<template>
    <div class="listBox">
        <div class="listHeader">
            <!-- 操作按钮 -->
            <div   class="listBtn">
                <!-- 操作按钮 -->
                <el-button size="mini"  :loading="searchLoading" @click="search">查询</el-button>
                <el-button size="mini"  @click="showAddDialog">新增</el-button>
                <el-button size="mini"  type="danger" @click="deleteData">删除</el-button>
                <el-button size="mini"  @click="showModifyDialog">修改</el-button>
            </div>
        </div>
        <div class="showContent" style="overflow:auto;">
            <el-container style="height: 100%;">
                <el-aside width="250px">
                    <CommonTree ref="tree" @nodeChange="nodeChange"></CommonTree>
                </el-aside>
                <el-main>
                    <!--类似面包屑功能-->
                    <div style="padding-right:10px;padding-top: 5px; margin-bottom: 10px">
                        <el-breadcrumb >
                            <el-breadcrumb-item v-for="(p) in pathData" :key="p.id">
                                <el-link type="primary" @click="changePathData(p.id)" style="cursor: pointer;">{{p.label}}</el-link>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <!--弹窗加载面包屑功能-->
                    <div  style="padding-right:10px;padding-top: 5px">
                        <div class="searchBox">
                            <el-form ref="form" label-width="150px" label-suffix="：">
                                <el-row :gutter="20" >
                                    <el-col :span="10">
                                        <el-form-item label="名称">
                                            <el-input placeholder="请输入..."  v-model="param.dutyName"  clearable />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="类型">
                                            <enum-select :defaultVal="param.dutyKind" codePath="app/dutyKind"   @changeSelect="value=>param.dutyKind = value.val"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" >
                                    <el-col :span="10">
                                        <el-form-item label="级别">
                                            <enum-select :defaultVal="param.dutyLevel" codePath="app/dutyLevel"   @changeSelect="value=>param.dutyLevel = value.val"/>
                                        </el-form-item>
                                    </el-col>
                            </el-form>
                        </div>
                        <CommonTable @search="getList" ref="table">
                                <el-table-column prop="dutyName" label="名称" align="center" >
                                    <template slot-scope="scope">
                                        <span @click="dutyClick(scope.row)" style="cursor: pointer;border-bottom: 1px solid #ccc">{{scope.row.dutyName}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dutyKind" label="类型" align="center" >
                                    <template slot-scope="scope">
                                        <enum-span :value="scope.row.dutyKind" codePath="app/dutyKind"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dutyLevel" label="级别" align="center" >
                                    <template slot-scope="scope">
                                        <eunm-span :value="scope.row.dutyLevel" codePath="app/dutyLevel"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dutyRemark" label="备注" align="center" />
                                <el-table-column prop="updateBy" label="最后更新人" align="center" />
                                <el-table-column prop="updateTime" width="150px" label="最后更新时间" align="center" />
                        </CommonTable>
                        <AddOrUpdateDialog  v-if="showSaveOrUpdateDialog" :dataSource="dataSource" @clickClose="clickClose" />
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
import CommonTable from '@/components/table/commonTable.vue'
import CommonTree from '@/components/tree/commonTree.vue'

import AddOrUpdateDialog from '@/views/paramManage/dutyDialog/addOrUpdateDialog.vue'

export default {
  components: {
    CommonTable,
    AddOrUpdateDialog,
    CommonTree
  },
  data () {
    return {
      // 查询参数
      param: {
        dutyName: '', // 账号
        dutyKind: '', // 客户姓名
        dutyLevel: '', // 手机号
        isQcFlag: '',
        parentid: '1'
      },
      dataSource: {
      },
      treeData: [],
      searchLoading: false,
      loadFlag: false,
      showAddBtn: true,
      showFormFlag: false,
      addFlag: false,
      currentData: null,
      pathData: [],
      showSaveOrUpdateDialog: false
    }
  },
  created () {
    this.$app.manageApi.getAllDuty().then((res) => {
      const allData = res
      this.$refs.tree.setData(allData, { parentId: 'parentid', name: 'dutyName', id: 'dutyInfoId' })
      this.pathData = [this.$refs.tree.getRoot()]
    }).finally(() => {
    })
  },
  mounted () {
  },
  computed: {
  },
  methods: {
    changeParentId () {
      const old = this.param.parentid
      const lastEle = this.pathData[this.pathData.length - 1]
      if (lastEle.id != old) {
        this.param.parentid = lastEle.id
        this.search()
      }
    },
    //  搜索
    search () {
      this.$refs.table.resetData()
    },
    getList (page) {
      this.searchLoading = true
      const param = { ...this.param, pageNo: page.pageNo, pageSize: page.pageSize }
      this.$app.manageApi.listSysDutyInfo(param).then((res) => {
        this.$refs.table.setData(res)
      }).finally(() => {
        this.searchLoading = false
      })
    },
    // 删除
    deleteData () {
      const selected = this.$refs.table.getSelected()
      if (selected) {
        this.$messageBox.confirm('确认执行此操作？').then(() => {
          const param = { id: selected.dutyInfoId }
          this.$app.manageApi.deleteDutyById(param).then((res) => {
            this.$messageBox.success('删除成功')
            this.search()
            this.$refs.tree.removeNodeById(selected.dutyInfoId)
          })
        })
      }
    },
    showAddDialog () {
      this.dataSource = { parentid: this.param.parentid }
      this.dataSource.pathData = this.pathData
      this.showSaveOrUpdateDialog = true
    },
    showModifyDialog () {
      const selected = this.$refs.table.getSelected()
      if (selected) {
        this.dataSource = selected
        this.dataSource.pathData = this.pathData
        this.showSaveOrUpdateDialog = true
      }
    },
    nodeChange () {
      const pathNodeArr = this.$refs.tree.getNoLeafNodePath()
      if (pathNodeArr.length == 0) {
        this.pathData = [this.$refs.tree.getRoot()]
      } else {
        this.pathData = pathNodeArr
      }
      this.changeParentId()
    },
    changePathData (id) {
      let find = 0
      for (let index = 0; index < this.pathData.length; index++) {
        if (this.pathData[index].id == id) {
          find = index
          break
        }
      }
      const newPathArr = this.pathData.slice(0, find + 1)
      this.pathData = newPathArr
      this.changeParentId()
    },
    clickClose (refresh, obj) {
      this.showSaveOrUpdateDialog = false
      if (refresh) {
        this.search()
        this.$refs.tree.updateOrInsert({ id: obj.dutyInfoId, label: obj.dutyName }, this.param.parentid)
      }
    },
    dutyClick (row) {
      this.pathData.push({ id: row.dutyInfoId, label: row.dutyName })
      this.changeParentId()
    }
  }
}
</script>
